
<template>
<div>
  <div><font style="align-content: center;font-size: 24px">付 费 文 章</font></div>
  <div style="padding-left: 800px"><font style="align-content: center;font-size: 20px">
    总 价:{{total}}
  </font>
    <el-button type="primary" round @click="pay" style="margin-left: 100px">去支付</el-button>
  </div>

<div>
    <el-table
      :data="articleCarts"
      stripe
      style="width: 100%"
      tooltip-effect="dark"
      @selection-change="handleSelectionChange">

      <el-table-column
        type="selection"
        width="55">
      </el-table-column>
      <el-table-column
        prop="id"
        label="ID"
        width="180">
      </el-table-column>
      <el-table-column
        prop="articlePic"
        label="文章图片"
        width="180">
        <template slot-scope="scope">
          <el-image
            style="width: 100px; height: 100px"
            :src="scope.row.articlePic"
            fit="fill"></el-image>
        </template>
      </el-table-column>
      <el-table-column
        prop="articleName"
        label="文章名称">
      </el-table-column>
      <el-table-column
        prop="price"
        label="文章价格">
      </el-table-column>
      <el-table-column
        fixed="right"
        label="操作"
        width="100">
        <template slot-scope="scope">
          <el-button type="text" size="small" @click="findArticleById(scope.row.articleId)">查看详情</el-button>
          <el-button type="text" size="small" @click="deleteArticleCart(scope.row.id)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
  <div v-html="alipay" ref="alipay"></div>
</div>

</div>
</template>


<script>
  import axios from 'axios';
    export default {
        name: "articleCart",
        data(){
          return{
            articleCarts:[],
            multipleSelection: [],
            total:0.0,
            articleCart:{
              price:'',
              articleId:''
            },
            ids:[],
            alipay:''
          }
        },
        methods:{
          findAllArticleCart(){
            axios.post("http://localhost:8088/articleCart/findAllArticleCart").then(res=>{
              if(res.data.code==0){
                this.articleCarts=res.data.data;
              }
            })
          },
          handleSelectionChange(val) {
            this.total=0.0;
            this.ids=[];
            console.log(val);
            for(let i = 0 ; i < val.length;i++){
              this.articleCart=val[i];
              this.total=this.total+val[i].price;
              this.ids.push(val[i].articleId);
            }
          },
          deleteArticleCart(id){
            axios.post('http://localhost:8088/articleCart/deleteArticleCart',{id:id}).then(res=>{
              if(res.data.code==0){
                this.findAllArticleCart();
              }else{
                alert(res.data.message);
                this.$router.push("article1");
              }
            })
          },
          pay(){
            axios.post("http://localhost:8088/articleOrder/addArticleOrder",{ids:this.ids}).then(res=>{
              this.alipay=res.data;
              this.$nextTick(() => {
                this.$refs.alipay.children[0].submit();
              })
            })
          },
          findArticleById(id){
            this.$router.push({name:"articleInfo",params:{id:id}});
          },

        },
        mounted() {
          this.findAllArticleCart();
        }
    }
</script>

<style scoped>

</style>
